<template>
  <!--  input 输入框 -->
  <el-form-item v-if="formItemSchema.type == 'input'" :label="formItemSchema.label" :label-width="formItemSchema.width"
    :prop="formItemSchema.field">
    <el-input v-model="formItemData[formItemSchema.field]" :class="formItemSchema.borderNone ? 'borderNone' : ''"
      :placeholder="formItemSchema.placeholder || formItemSchema.label"
      :label-position="formItemSchema.position || 'left'" :readonly="formItemSchema.readonly || false" />
  </el-form-item>
  <el-form-item v-if="formItemSchema.type == 'textarea'" :label="formItemSchema.label" :label-width="formItemSchema.width"
    :prop="formItemSchema.field">
    <el-input v-model="formItemData[formItemSchema.field]" :class="formItemSchema.borderNone ? 'borderNone' : ''"
      :placeholder="formItemSchema.placeholder || formItemSchema.label" type="textarea" :rows="formItemSchema.rows || 4"
      :maxlength="formItemSchema.maxlength || 300" show-word-limit
      :label-position="formItemSchema.position || 'left'" :readonly="formItemSchema.readonly || false" />
  </el-form-item>

  <!-- select 下拉框 -->
  <el-form-item v-if="formItemSchema.type == 'select'" :label="formItemSchema.label" :label-width="formItemSchema.width"
    :prop="formItemSchema.field">
    <el-select v-model="formItemData[formItemSchema.field]"
      :placeholder="formItemSchema.placeholder || formItemSchema.label">
      <el-option v-for="(items, idx) in formItemSchema.options" :label=items.label :value="items.value" />
    </el-select>
  </el-form-item>

  <!-- 日期选择器 -->
  <el-form-item v-if="formItemSchema.type == 'date'" :label="formItemSchema.label">
    <el-date-picker v-model="formItemData[formItemSchema.field]" :label="formItemSchema.label" type="date"
      placeholder="选择日期" size="small" value-format="yyyy-MM-dd" :label-width="formItemSchema.width" :prop="formItemSchema.field" />
  </el-form-item>

  <!-- cascader 级联选择器 -->

  <el-form-item v-if="formItemSchema.type == 'cascader'" :label="formItemSchema.label" :label-width="formItemSchema.width"
    :prop="formItemSchema.field">
    <el-cascader v-model="formItemData[formItemSchema.field]" :options="formItemSchema.data" props="props" />
  </el-form-item>

  <!-- 单选框 -->
  <el-form-item v-if="formItemSchema.type == 'radio'" :label="formItemSchema.label" :prop="formItemSchema.field">
    <el-radio-group v-model="formItemData[formItemSchema.field]">
      <el-radio v-for="radioRow in formItemSchema.data" :label="radioRow.value" :disabled="radioRow.disabled"
        :border="radioRow.border" :size="radioRow.size" @change="formItemSchema.handleValueChange">{{ radioRow.label
        }}</el-radio>
    </el-radio-group>
  </el-form-item>

  <!-- 富文本 -->
  <el-form-item v-if="formItemSchema.type == 'richText'" :label="formItemSchema.label" :prop="formItemSchema.field">
    <editor :height="500" v-model="formItemData[formItemSchema.field]"></editor>
  </el-form-item>
</template>

<script lang="ts" setup>
import { FormDataRowType, FormDataType } from 'types/form';

const props = defineProps<{
  formSchema: FormDataRowType;
  formModel: FormDataType | undefined
}>();

const formItemSchema = ref(props.formSchema)
const formItemData = computed(() => {
  return props.formModel || {}
})

</script>

<style></style>
